<template>
  <div style="padding:15px">
    <a-button @click="openMadal">modal</a-button>
    <a-button @click="openMadal1">modal</a-button>
    <a-modal title="Title" :visible="visible" @cancel="closeModal">
      <rich-editor
        ref="text"
        :handlerImageUpload="upload"
        placeholder="请输入内容"
        :toolbarSticky="true"
        v-model="rvalue"
      />
    </a-modal>
    <!-- <rich-editor
      id="test"
      imagesUploadUrl="http://localhost:3000/uploadImage"
      placeholder="请输入内容"
      v-model="rvalue"
      :toolbarSticky="true"
      :pasteDataImages="true"
      :imagetoolsCorsHosts="['localhost']"
      ref="editor"
    />-->
    <hr />
    <p v-drap>
      阿拉善萨卡上来看阿萨卡拉屎
      <img
        src="https://cdn-lianlianlvyou-com.oss-cn-beijing.aliyuncs.com/n/temp/20200519151425139.jpg"
        style="width:100px;height:100px"
        alt
        srcset
      />
    </p>
    <button @click="getContent">content</button>
    <button @click="setcontent">setcontent</button>
    <button @click="goEnd">goEnd</button>
    <!-- <echartsLine /> -->
    <!-- <echartsPie /> -->
  </div>
</template>
<script>
import lrz from "lrz";
export default {
  data() {
    return {
      rvalue: "",
      visible: false,
    };
  },
  methods: {
    closeModal() {
      // this.rvalue = "";
      this.visible = false;
    },
    openMadal() {
      this.visible = true;
    },
    goEnd() {
      this.$refs.editor.goEnd();
    },
    openMadal1() {
      this.visible = true;
      this.rvalue = "123aaa";
    },
    setcontent() {
      this.$refs.editor
        .setContent(`<div class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" style="box-sizing: border-box; margin: 0px; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; font-feature-settings: 'tnum'; position: relative; padding: 8px 30px 8px 37px; overflow-wrap: break-word; border-radius: 0px; background-color: #fff7e6; border: 0px; font-family: -apple-system, system-ui, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" data-show="true">
<div style="box-sizing: border-box; color: #e6a23c;">
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1em;">产品上线前，请仔细检查文案设置结算价，佣金，发码方式，发码数量等内容，该内容应与对接表一致。</p>
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1em;">同一产品加推，或同一产品多站点的，可以选择同一份合同，不必重复创建合同。</p>
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1em;">产品绑定合同上线后不能修改，后期如果需要更改绑定合同、更改结算价/发码方式/发码数量/佣金等内容（阶梯性结算价或特殊情况除外），产品经理需按照公司制度缴纳罚款&nbsp;<span style="box-sizing: border-box; color: red;">￥200.00</span>元，所以请在产品上线前务必检查！务必检查！务必检查！</p>
</div>
</div>
<div class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable" style="box-sizing: border-box; margin: 15px 0px; color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; font-feature-settings: 'tnum'; position: relative; padding: 8px 30px 8px 37px; overflow-wrap: break-word; border-radius: 0px; background-color: #fff7e6; border: 0px; font-family: -apple-system, system-ui, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" data-show="true">
<div style="box-sizing: border-box; color: #e6a23c;">
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 1em;">如果不清楚如何设置和发布产品或者不清楚如何修改产品相关配置（如预约发码设置，产品配置，套餐金额配置，海报配置），联系带你的同事 或者联系企划部胡雨思（微信号：1821252825）</p>
</div>
</div>`);
      // this.rvalue='12312'
    },
    getContent() {
      console.log(this.rvalue);
    },
    upload(blobInfo, success, failure) {
      // console.log(blobInfo)
      // console.log(blobInfo.blob())
      // console.log(blobInfo.filename())
      // console.log(blobInfo.uri())
      // lrz(blobInfo.blob()).then(
      //   rst=>{
      //     console.log(rst)
      //   }
      // )
      let ImagesUploadUrl = "http://localhost:3000/uploadImage";
      var xhr, formData;
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open("POST", ImagesUploadUrl);
      xhr.onerror = function (err) {
        console.error(err);
      };
      xhr.onload = function () {
        console.log(xhr);
        var json;
        if (xhr.status !== 200) {
          failure("HTTP Error: " + xhr.status);
          return;
        }
        json = JSON.parse(xhr.responseText);
        if (!json || typeof json.data !== "string") {
          failure("文件上传失败");
          return;
        }
        success(json.data);
      };
      formData = new FormData();
      formData.append("file", blobInfo.blob(), blobInfo.filename());
      xhr.send(formData);
    },
  },
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
}
</style>